<!-- <template>
  <div class="list">
    <el-checkbox-group
      v-model="checkedCities"
      @change="handleCheckedCitiesChange"
    >
      <el-checkbox
        v-for="city in cities"
        :label="city"
        :key="city"
        @change="handleC"
        >{{ city }}</el-checkbox
      >
    </el-checkbox-group>
    <el-checkbox
      :indeterminate="isIndeterminate"
      v-model="checkAll"
      @change="handleCheckAllChange"
      >全选</el-checkbox
    >
  </div>
</template>

<script>
const cityOptions = ['旅游攻略', '新闻资讯', '书院趣事'];
import { mapState } from 'vuex';
export default {
  data() {
    return {
      checkAll: false,
      isIndeterminate: true,
      checkedCities: ['旅游攻略'],
      cities: cityOptions,
    };
  },
  computed: {
    ...mapState('talkList', ['checkedC']),
  },
  methods: {
    handleCheckAllChange(val) {
      this.checkedCities = val ? cityOptions : [];
      this.isIndeterminate = false;
      this.$store.state.talkList.checkedC = this.checkedCities;
      console.log(this.$store.state.talkList.checkedC);
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
    },
    handleC() {
      this.$store.state.talkList.checkedC = this.checkedCities;
      console.log(this.$store.state.talkList.checkedC);
    },
  },
  created() {
    this.$store.state.talkList.checkedC = this.checkedCities;
    console.log(this.$store.state.talkList.checkedC);
  },
};
</script>

<style lang="less" scoped>
.list {
  margin-bottom: 30px;
}
.el-checkbox-group {
  float: left;
}
.el-checkbox {
  float: left;
  margin-left: 100px;
}
.el-checkbox-group {
  margin-left: 200px;
}
</style> -->
<template></template>

<script>
export default {};
</script>

<style></style>
